<template>
  <div class="flx-row-s-c">
    <template v-for="(item, index) in list">
      <div v-if="index == active" :key="index" class="tab-area-item active">{{ item.name }}</div>
      <template v-else>
        <a v-if="item.other" :key="index" :href="item.to" class="tab-area-item normal">{{ item.name }}</a>
        <router-link v-else :key="index" :to="item.to" class="tab-area-item normal">{{ item.name }}</router-link>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: 'VipTablist',
  props: {
    list: {
      default: () => []
    }
  },
  watch: {
    "$route": {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.active = newValue.meta.tabIndex;
      }
    }
  },
  data() {
    return {
      active: null
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
};
</script>

<style lang="scss" scoped>
.tab-area-item {
  height: 48px;
  min-width: 120px;
  @include btn-s(0 12px, 48px, null);
  font-size: 16px;
  margin-right: 15px;
}
.active {
  background-color: #F9521F;
  color: #fff;
  cursor: default !important;
}
.normal {
  border: #D2D2D2 solid 1px;
  color: #3D3D3D;
  transition: border-color .3s, color .3s;

  &:hover {
    border: #F9521F solid 1px;
    color: #F9521F;
  }
}
</style>